T├®cnico de Gest├úo e Programa├º├úo de Sistemas Inform├íticos
Prova de Aptidão Profissional
Plataforma Digital - InfoConnect
Cantanhede
Douglas Anjos, 12┬║ TGPSI, N┬║ 3
2023 / 2026
Escola T├®cnico Profissional de Cantanhede
T├®cnico de Gest├úo e Programa├º├úo de Sistemas Inform├íticos
Prova de Aptidão Profissional: Plataforma Digital - InfoConnect
Equipa de Acompanhamento: Michael Teixeira, Elisabete Cavaleiro e Teresa Fernandes
Cantanhede
2025/2026
PARA O TRABALHO QUE GOSTAMOS LEVANTAMO-NOS CEDO E FAZEMO-LO COM ALEGRIA.
William Shakespeare
Agradecimentos
Índice Geral
Índice de Figuras
Índice de Tabelas
Escolhi o tema ÔÇ£Plataforma Digital ÔÇô InfoConnectÔÇØ porque considero que a tecnologia pode ter um papel muito importante na melhoria da comunica├º├úo e da gest├úo de servi├ºos dentro das empresas de inform├ítica. Durante o curso T├®cnico de Gest├úo e Programa├º├úo de Sistemas Inform├íticos, tive a oportunidade de realizar v├írios projetos semelhantes em sala de aula, o que despertou o meu interesse por desenvolver algo mais completo e funcional.
Percebi que, em muitas empresas, os processos de atendimento ao cliente ainda s├úo feitos de forma manual, atrav├®s de chamadas telef├│nicas, mensagens ou anota├º├Áes em papel. Esse m├®todo pode causar atrasos, falhas na comunica├º├úo e perda de informa├º├Áes importantes. Com base nisso, decidi criar uma plataforma digital que permita automatizar e centralizar estes processos, tornando o atendimento mais r├ípido, transparente e eficiente, tanto para o cliente como para a empresa.
Objetivos | |
Gerais | Específicos |
Terminar o Curso |
|
Desenvolvimento da PAP |
|
Computador Portátil (Acer nitro ANV15-51)
- 13th Gen Intel(R) Core(TM) i5-13420H (2.10 GHz)
- NVIDIA GeForce RTX 4050 Laptop GPU
- Ram 16Gb
- Disco SSD 512 Gb
- Windows 11 64 bits
Visual Studio Code
- Sistema Operativo: Windows 8, 10 ou 11 / macOS / Linux
- Processador: 1.6 GHz ou superior
- Mem├│ria RAM: 2 GB (recomendado 4 GB)
- Espaço em disco: 500 MB livres
- Resolução mínima: 1024 x 768
Node.js
- Sistema Operativo: Windows 8.1, 10 ou 11 / macOS / Linux
- Processador: 1.4 GHz ou superior
- Mem├│ria RAM: 2 GB (recomendado 4 GB)
- Espaço em disco: 200 MB para instalação
- Ligação à Internet: Necessária para instalação de pacotes (npm)
XAMPP (para servidor Apache e MySQL)
- Sistema Operativo: Windows 7, 8, 10 ou 11 / Linux / macOS
- Processador: Intel Pentium 4 ou superior
- Mem├│ria RAM: 2 GB (recomendado 4 GB)
- Espaço em disco: 2 GB disponíveis
- Resolução mínima: 1024 x 768
GitHub
- Um browser com acesso à Internet
Navegadores (OperaGX)
- Sistema Operativo: Windows 10 ou superior / macOS
- Processador: Intel Pentium 4 ou superior
- Mem├│ria RAM: 2 GB (recomendado 4 GB)
- Espaço em disco: 400 MB livres
- Resolução mínima: 1280 x 720
A metodologia será baseada em cascata com retorno. Esse modelo segue uma sequência de etapas bem definidas análise, desenho, implementação, testes e manutenção, mas com a possibilidade de voltar a fases anteriores sempre que forem detetados erros ou necessidades de melhoria. A escolha desta metodologia deve-se ao facto de proporcionar organização e clareza nas etapas, permitindo ao mesmo tempo ajustes contínuos ao longo do desenvolvimento. Assim, o projeto pode evoluir de forma controlada, garantindo a qualidade final da aplicação.
As principais etapas são:
A Prova de Aptid├úo Profissional ir├í ser desenvolvida em tr├¬s fases. Cada fase ├® constitu├¡da por v├írias atividades. A primeira fase, a Fase de Defini├º├úo tem como principais atividades: pesquisa bibliogr├ífica, an├ílise do sistema, an├ílise dos requisitos e planeamento do projeto. A segunda fase, a Fase de Desenvolvimento ├® constitu├¡da pelas seguintes atividades, desenho, codifica├º├úo e testes. A terceira e ├║ltima fase, a Fase de Manuten├º├úo ├® onde encontramos as atividades de corre├º├úo, adapta├º├úo e evolu├º├úo.
Ôû║ Pesquisa Bibliogr├ífica ÔÇô etapa inicial do trabalho com o objetivo de reunir todas as informa├º├Áes necess├írias para o desenvolvimento do projeto.
Ôû║ An├ílise do Sistema ÔÇô atividade onde se realizou o levantamento de todas as funcionalidades do projeto e a forma como elas v├úo funcionar. Nesta atividade foi tamb├®m realizada a escolha das tecnologias para a realiza├º├úo do mesmo.
Ôû║ An├ílise dos Requisitos ÔÇô nesta atividade foi necess├írio fazer a verifica├º├úo dos requisitos m├¡nimos do Software necess├írio para implementa├º├úo do projeto.
Ôû║ Planeamento do Projeto ÔÇô com esta atividade foi desenvolvido o cronograma em que se estabelece as balizas temporais para cada uma das fases do projeto.
Ôû║ Desenho ÔÇô nesta atividade faz-se o levantamento dos dados necess├írios para cria├º├úo da Base de Dados utilizada no projeto, implementando o Diagrama Entidade Relacionamento e o Modelo de Dados. Faz-se ainda a estrutura├º├úo da navega├º├úo do website e do backoffice.
Ôû║ Codifica├º├úo ÔÇô atividade em que toda a parte de codifica├º├úo ├® realizada.
Ôû║ Testes ÔÇô ao longo desta atividade realiza-se os testes ├ás funcionalidades implementadas por forma a garantir que nesta fase as mesmas est├úo a funcionar de acordo com o que foi planeado.
Ôû║ Corre├º├úo ÔÇô ├® nesta atividade em que irei realizar corre├º├Áes ao projeto. Estas corre├º├Áes tanto podem ser ├á interface gr├ífica ou ao c├│digo realizado at├® ao momento. Se for necess├írio tamb├®m se poder├í fazer altera├º├Áes estruturais ├á base de dados.
Ôû║ Adapta├º├úo ÔÇô depois de executado todos os testes e corre├º├Áes, ├® nesta atividade que v├úo ser realizadas adapta├º├Áes ao projeto. Estas adapta├º├Áes podem ser ao n├¡vel da interface gr├ífica ou ao n├¡vel da otimiza├º├úo de c├│digo. Estas adapta├º├Áes surgem da necessidade do projeto ser testado por outras pessoas.
Ôû║ Evolu├º├úo ÔÇô depois de ter os objetivos iniciais conclu├¡dos, ├® nesta fase, havendo tempo que irei tentar implementar novas funcionalidades que foram surgindo ao longo do desenvolvimento do projeto e que inicialmente n├úo estavam previstas.
Nesta fase foram instaladas e configuradas todas as ferramentas necess├írias para o desenvolvimento da plataforma InfoConnect, tanto ao n├¡vel do Front-End como do Back-End. Cada ferramenta desempenha um papel fundamental ao longo do projeto, desde a escrita do c├│digo at├® ├á gest├úo da base de dados e execu├º├úo do servidor. As imagens inclu├¡das ao longo desta sec├º├úo ilustram cada etapa do processo de instala├º├úo.
Instalação do Visual Studio Code e Antigravity
O primeiro passo do desenvolvimento da plataforma InfoConnect foi a instalação dos editores de código Visual Studio Code (VS Code) e Antigravity, que foram as ferramentas escolhidas para programar tanto o Front-End como o Back-End do projeto.
Figura 2-Página oficial do Visual Studio Code. Para fazer o download cliquei em download for Windows.
Figura 3-Ecrã do instalador apresentado para aceitar os termos de licença do Visual Studio Code. Aceitei os termos e cliquei em Avançar.
Figura 4-Etapa de configuração onde são selecionadas tarefas adicionais, como criar atalhos e adicionar o VS Code ao PATH. Depois vamos em Avançar.
Figura 5-Resumo final das configura├º├Áes. O instalador est├í preparado para iniciar a instala├º├úo do Visual Studio Code.
Figura 6-Instalação finalizada com sucesso. O Visual Studio Code está pronto a ser utilizado.
Figura 7-A imagem mostra a página inicial oficial do Antigravity. Para fazer o download cliquei em download for Windows.
Figura 8-Aqui ├® exibida a sec├º├úo de download do Antigravity. Foi selecionada a vers├úo compat├¡vel com Windows. X64 de acordo com o PC.
Figura 9-Esta imagem apresenta o ecrã de aceitação dos termos de licença. Aceitei os termos e cliquei em Avançar.
Figura 10-O instalador permite configurar op├º├Áes adicionais, como a cria├º├úo de atalhos no menu iniciar.
Figura 11-A imagem mostra o ecrã que confirma a conclusão da instalação.
Figura 12-Aqui vemos o Antigravity já aberto no ambiente de trabalho.
Instalação do Node.js
De seguida foi instalado o Node.js, essencial para a criação do servidor Back-End e para a utilização do gestor de pacotes npm. Durante o processo, ilustrado na imagem incluída no documento, foram aceites os termos de licença e escolhidos os componentes necessários, como o runtime do Node e o npm.
Figura 13-Página oficial do Node.js. Para fazer o download cliquei em Get Node.js
Figura 14-Ecrã download foi selecionada a versão LTS (Long Term Support), recomendada para ambientes de produção e estabilidade.
Figura 15-Início do assistente de instalação do Node.js.
Figura 16-Apresentação dos termos de licença. Aceitei os termos e cliquei em Next.
Figura 17-Seleção da localização onde o Node.js será instalado no sistema.
Figura 18-Seleção dos componentes essenciais: Node.js runtime, npm (Node Package Manager) e a opção para adicionar ao PATH.
Figura 19-Opção para instalar ferramentas adicionais (Python e Visual Studio Build Tools) para compilar módulos nativos.
Figura 20-Resumo das configura├º├Áes antes de iniciar a instala├º├úo do Node.js.
Figura 21-Linha de comandos responsável pela instalação de ferramentas necessárias para pacotes npm.
O Node.js permitiu posteriormente configurar o servidor Express, instalar dependências e executar scripts fundamentais para o funcionamento do projeto InfoConnect.
Instalação do XAMPP
Posteriormente, procedeu-se ├á instala├º├úo do XAMPP, uma ferramenta que re├║ne o servidor Apache, o MySQL e o phpMyAdmin ÔÇö elementos indispens├íveis para a gest├úo da base de dados do projeto.
Figura 22-P├ígina oficial do XAMPP onde ├® feito o download do instalador. Download Xampp para Windows.
Figura 23-Ecrã de seleção dos componentes do XAMPP. Deixei padrão e cliquei em Next.
A imagem referente à instalação do XAMPP demonstra o processo de seleção dos módulos essenciais: Apache e MySQL. Estes são os serviços necessários para alojar a base de dados e permitir a comunicação entre o Back-End e o sistema de gestão de dados.
Inicialização do XAMPP
Figura 24-Painel de Controlo do XAMPP (vers├úo 3.3.0) com os servi├ºos Apache e MySQL . Quando est├úo ativos, permitem aceder ao servidor local e gerir a base de dados atrav├®s do phpMyAdmin.
Após a instalação, foi aberto o Painel de Controlo do XAMPP, como demonstrado na imagem.
Os serviços Apache e MySQL foram iniciados, permitindo:
o funcionamento local do servidor,
o acesso ao phpMyAdmin,
a criação e gestão da base de dados utilizada na plataforma InfoConnect.
Este passo ├® fundamental, pois sem estes servi├ºos ativos o Back-End n├úo conseguiria comunicar com a base de dados MySQL.
Acesso ao phpMyAdmin
Criei a Base de dados bd_infoconnect e as imagens abaixo amostram as cria├º├Áes das tabelas
Figura 25-Tabela fundamental do sistema, contendo email, senha e tipo de utilizador (Admin, T├®cnico ou Cliente).
Figura 26-Tabela com dados espec├¡ficos dos clientes, relacionada ├á tabela utilizadores atrav├®s de chave estrangeira.
Figura 27-Tabela destinada aos t├®cnicos da empresa, contendo especialidade e liga├º├úo ├á tabela utilizadores.
Figura 28-Tabela central do sistema, respons├ível por registar pedidos de assist├¬ncia, associando clientes, t├®cnicos, problemas descritos e estado atual.
Figura 29-Tabela que cont├®m os or├ºamentos gerados para cada pedido, com valores, descri├º├úo e estado do or├ºamento.
Figura 30-Tabela utilizada para a comunica├º├úo entre cliente e t├®cnico dentro do sistema, associada aos pedidos.
Figura 31-Tabela destinada às Perguntas Frequentes para apoio ao cliente.
Figura 32-Tabela utilizada para registar atividades importantes no sistema, como altera├º├Áes, acessos e a├º├Áes administrativas.
Figura 33-Representa├º├úo gr├ífica das entidades principais da plataforma InfoConnect e as rela├º├Áes entre elas.
Com os serviços do XAMPP iniciados, foi acedida a interface do phpMyAdmin, mostrada na última imagem desta secção.
Aqui foi criada a base de dados infoconnect e foram executados os comandos SQL responsáveis pela criação das tabelas principais:
O phpMyAdmin permitiu, de forma simples e visual, gerir toda a estrutura da base de dados utilizada pelo sistema.
Descri├º├úo T├®cnica do Template
O template que foi utilizado no projeto InfoConnect foi gerado automaticamente atrav├®s do Google AI Studio, ├® uma plataforma de intelig├¬ncia artificial capaz de criar estruturas completas de aplica├º├Áes web a partir de instru├º├Áes em linguagem natural.
A ferramenta gerou:
Figura 34-Landing Page do template
Arquitetura Geral do Projeto
O projeto segue uma arquitetura Full-Stack, composta por três camadas principais:
Front-End: desenvolvido em React, funcionando como uma Single Page Application (SPA), responsável por toda a interface visual e interação com o utilizador;
Back-End: implementado em Node.js com o framework Express, disponibilizando uma API REST que comunica com a base de dados;
Base de Dados: sistema relacional MySQL, onde s├úo guardadas todas as informa├º├Áes da plataforma (utilizadores, pedidos, or├ºamentos, mensagens, etc.).
Esta separação permite uma maior organização, escalabilidade e manutenção do sistema.
Tecnologias Utilizadas no Front-End
O template disponibiliza um ambiente completo baseado em tecnologias modernas:
React 19: biblioteca principal utilizada para construir a interface. Instalação (via Vite): npm create vite@latest. - template react-ts.
Vite: ferramenta de desenvolvimento rápida, responsável pelo arranque da aplicação e compilação. Instalação: Incluído no comando acima.
Tailwind CSS: framework de estilos utilitário, permitindo criar interfaces modernas de forma rápida e consistente. Instalação: npm install -D tailwindcss postcss autoprefixer && npx tailwindcss init -p.
Lucide-React: conjunto de ícones utilizados nos componentes da interface. Instalação: npm install lucide-react.
Recharts: biblioteca usada para gerar os gráficos do dashboard do administrador. Instalação: npm install recharts.
TypeScript: utilizado parcialmente para melhorar a tipagem e reduzir erros de execução. Instalação: npm install -D typescript @types/react @types/react-dom.
Tecnologias Utilizadas no Back-End
A parte de servidor do template utiliza:
Node.js: ambiente de execução do JavaScript no lado do servidor. Instalação: Baixar e instalar do site oficial.
Express: framework responsável pela construção da API. Instalação: npm install express.
MySQL2: biblioteca que permite conectar o servidor ao SGBD MySQL. Instalação: npm install mysql2.
Multer: middleware utilizado para upload de ficheiros (ex.: anexos em pedidos de assistência). Instalação: npm install multer.
Nodemailer. ferramenta para envio de emails, aqui configurada inicialmente com contas de teste. Instalação: npm install nodemailer.
PDFKit: utilizada para gerar relatórios em formato PDF. Instalação: npm install pdfkit.
CORS: middleware que permite a comunicação entre portas diferentes, neste caso entre React (5173) e o servidor (3000). Instalação: npm install cors.
Prompt:
Cria um site minimalista e moderno para a plataforma InfoConnect, utilizando React + Vite + TailwindCSS. A estrutura deve incluir uma Landing Page simples e limpa InfoConnect, uma P├ígina de Login e uma P├ígina de Criar Conta com formul├írios responsivos, e um Painel principal (Dashboard) com cart├Áes de estat├¡sticas. Implementa tamb├®m uma Navbar e uma Sidebar minimalistas com ├¡cones da biblioteca lucide, e cria as p├íginas base: Home, Pedidos, Clientes, T├®cnicos e Configura├º├Áes. A plataforma tem como finalidade facilitar o atendimento e a comunica├º├úo entre empresas de inform├ítica e os seus clientes. Pretende-se tornar o processo de gest├úo de pedidos mais r├ípido, pr├ítico e automatizado, permitindo que os clientes registem pedidos de assist├¬ncia ou or├ºamentos, acompanhem o estado do servi├ºo em tempo real e comuniquem diretamente com a empresa. As empresas poder├úo gerir pedidos e clientes, enviar or├ºamentos, registar interven├º├Áes e consultar estat├¡sticas essenciais para melhorar o processo de atendimento.